<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_计算属性简写</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
   
    <div id="root">
        姓：<input type="text" v-model ="fristName"><br>
        名：<input type="text" v-model ="lastName"><br>
        全名：<sapn>{{fullName}}</span>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动生成生产提示。

 const vm = new Vue({
        el:'#root',
        data:{
         fristName:'张',
         lastName:'三',
        
            },
         computed:{
            //完整写法
            // fullName:{
            //  get(){
            //    console.log('get被调用了')
          
            //    return this.fristName + '-' + this.lastName
            //  },
            //  set(value){
            //     console.log('set',value)
            //     const arr = value.split('-')
            //     this.fristName = arr[0]
            //     this.lastName = arr[1]

            //  }
            // }

            //简写
             fullName:function(){
               console.log('get被调用了')
               return this.fristName + '-' + this.lastName
             }
      }
        })
</script>
</html>